---
title: Voce di menu
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Una voce di menu versatile progettata per essere utilizzata in un menu o in un elenco di navigazione.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Tipo            | Descrizione                                                                                                                                  |
| ------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| IconaSinistra | IconaComponente | Un'icona opzionale a sinistra visualizzata prima del testo nella voce di menu                                                                |
| accento       | string          | Specifica il colore dell'accento della voce di menu. Options include: `default`, `danger`, and `placeholder` |
| testo         | string          | Il contenuto di testo della voce di menu                                                                                                     |
| iconButtons   | array           | Un array di oggetti che rappresentano pulsanti icona aggiuntivi associati alla voce di menu                                                  |
| isTooltipOpen | booleano        | Controlla la visibilità del tooltip associato alla voce di menu                                                                              |
| testId        | string          | L'attributo data-testid per scopi di test                                                                                                    |
| onClick       | funzione        | Funzione di callback attivata quando la voce di menu viene cliccata                                                                          |
| nomeClasse    | string          | Nome opzionale per stile aggiuntivo                                                                                                          |

</Tab>
</Tabs>

## Variants

Le diverse varianti del componente voce di menu includono le seguenti:

### Comando

Una voce di menu in stile comando all'interno di un menu per indicare le scorciatoie da tastiera.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Tipo            | Descrizione                                                                   |
| ------------- | --------------- | ----------------------------------------------------------------------------- |
| IconaSinistra | IconaComponente | Un'icona opzionale a sinistra visualizzata prima del testo nella voce di menu |
| testo         | string          | Il contenuto di testo della voce di menu                                      |
| firstHotKey   | string          | Il primo collegamento da tastiera associato al comando                        |
| secondHotKey  | string          | Il secondo collegamento da tastiera associato al comando                      |
| isSelected    | booleano        | Indica se la voce di menu è selezionata o evidenziata                         |
| onClick       | funzione        | Funzione di callback attivata quando la voce di menu viene cliccata           |
| nomeClasse    | string          | Nome opzionale per stile aggiuntivo                                           |

</Tab>
</Tabs>

### Trascinabile

Un componente di menu trascinabile progettato per essere utilizzato in un menu o elenco in cui gli elementi possono essere trascinati e azioni aggiuntive possono essere eseguite tramite pulsanti icona.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Tipo            | Descrizione                                                                                                         |
| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------- |
| IconaSinistra  | IconaComponente | Un'icona opzionale a sinistra visualizzata prima del testo nella voce di menu                                       |
| accento        | string          | Specifica il colore dell'accento della voce di menu. Può essere `default`, `placeholder` o `danger` |
| iconButtons    | array           | Un array di oggetti che rappresentano pulsanti icona aggiuntivi associati alla voce di menu                         |
| isTooltipOpen  | booleano        | Controlla la visibilità del tooltip associato alla voce di menu                                                     |
| onClick        | funzione        | Funzione di callback da attivare quando si fa clic sul collegamento                                                 |
| testo          | string          | Il contenuto di testo della voce di menu                                                                            |
| isDragDisabled | booleano        | Indica se il trascinamento è disabilitato                                                                           |
| nomeClasse     | string          | Nome opzionale per stile aggiuntivo                                                                                 |

</Tab>
</Tabs>

### Multi-selezione

Fornisce un modo per implementare la funzionalità di selezione multipla con una casella di controllo associata.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Tipo            | Descrizione                                                                     |
| -------------- | --------------- | ------------------------------------------------------------------------------- |
| IconaSinistra  | IconaComponente | Un'icona opzionale a sinistra visualizzata prima del testo nella voce di menu   |
| testo          | string          | Il contenuto di testo della voce di menu                                        |
| selezionato    | booleano        | Indica se la voce di menu è selezionata (segnata)            |
| onSelectChange | funzione        | Funzione di callback attivata quando cambia lo stato della casella di controllo |
| nomeClasse     | string          | Nome opzionale per stile aggiuntivo                                             |

</Tab>
</Tabs>

### Avatar multi-selezione

Una voce di menu a selezione multipla con un avatar, una casella di controllo per la selezione e contenuto testuale.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Tipo        | Descrizione                                                                     |
| -------------- | ----------- | ------------------------------------------------------------------------------- |
| avatar         | `ReactNode` | L'avatar o l'icona da visualizzare sul lato sinistro della voce di menu         |
| testo          | string      | Il contenuto di testo della voce di menu                                        |
| selezionato    | booleano    | Indica se la voce di menu è selezionata (segnata)            |
| onSelectChange | funzione    | Funzione di callback attivata quando cambia lo stato della casella di controllo |
| nomeClasse     | string      | Nome opzionale per stile aggiuntivo                                             |

</Tab>
</Tabs>

### Naviga

Una voce di menu con un'icona opzionale a sinistra, contenuto testuale e un'icona a freccia verso destra.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Tipo            | Descrizione                                                                   |
| ------------- | --------------- | ----------------------------------------------------------------------------- |
| IconaSinistra | IconaComponente | Un'icona opzionale a sinistra visualizzata prima del testo nella voce di menu |
| testo         | string          | Il contenuto di testo della voce di menu                                      |
| onClick       | funzione        | Funzione di callback attivata quando la voce di menu viene cliccata           |
| nomeClasse    | string          | Nome opzionale per stile aggiuntivo                                           |

</Tab>
</Tabs>

### Seleziona

Una voce di menu selezionabile, con opzioni di contenuto a sinistra (icona e testo) e un indicatore (icona di selezione) per lo stato selezionato.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Tipo            | Descrizione                                                                   |
| ------------- | --------------- | ----------------------------------------------------------------------------- |
| IconaSinistra | IconaComponente | Un'icona opzionale a sinistra visualizzata prima del testo nella voce di menu |
| testo         | string          | Il contenuto di testo della voce di menu                                      |
| selezionato   | booleano        | Indica se la voce di menu è selezionata (segnata)          |
| disabilitato  | booleano        | Indica se la voce di menu è disabilitata                                      |
| hovered       | booleano        | Indica se la voce di menu viene attualmente evidenziata                       |
| onClick       | funzione        | Funzione di callback attivata quando la voce di menu viene cliccata           |
| nomeClasse    | string          | Nome opzionale per stile aggiuntivo                                           |

</Tab>
</Tabs>

### Seleziona Avatar

Una voce di menu selezionabile con un avatar, opzioni di contenuto a sinistra (avatar e testo) e un indicatore (icona di selezione) per lo stato selezionato.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Props        | Tipo        | Descrizione                                                             |
| ------------ | ----------- | ----------------------------------------------------------------------- |
| avatar       | `ReactNode` | L'avatar o l'icona da visualizzare sul lato sinistro della voce di menu |
| testo        | string      | Il contenuto di testo della voce di menu                                |
| selezionato  | booleano    | Indica se la voce di menu è selezionata (segnata)    |
| disabilitato | booleano    | Indica se la voce di menu è disabilitata                                |
| hovered      | booleano    | Indica se la voce di menu viene attualmente evidenziata                 |
| testId       | string      | L'attributo data-testid per scopi di test                               |
| onClick      | funzione    | Funzione di callback attivata quando la voce di menu viene cliccata     |
| nomeClasse   | string      | Nome opzionale per stile aggiuntivo                                     |

</Tab>
</Tabs>

### Seleziona Colore

Una voce di menu selezionabile con un campione di colore per scenari in cui si desidera che gli utenti scelgano un colore da un menu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props        | Tipo     | Descrizione                                                                                                                                                                                                                        |
| ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| colore       | string   | Il colore del tema che viene visualizzato come campione nella voce di menu. Le opzioni includono: `verde`, `turchese`, `cielo`, `blu`, `viola`, `rosa`, `rosso`, `arancione`, `giallo`, e `grigio` |
| selezionato  | booleano | Indica se la voce di menu è selezionata (segnata)                                                                                                                                                               |
| disabilitato | booleano | Indica se la voce di menu è disabilitata                                                                                                                                                                                           |
| hovered      | booleano | Indica se la voce di menu viene attualmente evidenziata                                                                                                                                                                            |
| variante     | string   | La variante del campione di colore. Può essere `default` o `pipeline`                                                                                                                                              |
| onClick      | funzione | Funzione di callback attivata quando la voce di menu viene cliccata                                                                                                                                                                |
| nomeClasse   | string   | Nome opzionale per stile aggiuntivo                                                                                                                                                                                                |

</Tab>
</Tabs>

### Attiva/Disattiva

Una voce di menu con un interruttore a levetta associato per permettere agli utenti di abilitare o disabilitare una funzionalità specifica

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props                  | Tipo            | Descrizione                                                                   |
| ---------------------- | --------------- | ----------------------------------------------------------------------------- |
| IconaSinistra          | IconaComponente | Un'icona opzionale a sinistra visualizzata prima del testo nella voce di menu |
| testo                  | string          | Il contenuto di testo della voce di menu                                      |
| attivato               | booleano        | Indica se l'interruttore è nello stato "on" o "off"                           |
| onToggleChange         | funzione        | Funzione di callback attivata quando cambia lo stato dell'interruttore        |
| dimensioneInterruttore | string          | La dimensione dell'interruttore a levetta. Può essere \\    |
| nomeClasse             | string          | Nome opzionale per stile aggiuntivo                                           |

</Tab>
</Tabs>
